<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #EAEAEA;">
			<h1 class="mui-title" style="color: black;" id="title">微信</h1>
			<a id="pop_btn" class="mui-icon mui-icon-right-nav mui-pull-right">...</a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="chat.html">
				<span class="mui-icon iconfont icon-qipaosixinpinglunxiaoxiliaotianhuifuxianxing" style="font-size: 25px;"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="friend_list.html">
				<span class="mui-icon iconfont icon-tongxunlu2" style="font-size: 25px;"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" id="discover.html">
				<span class="mui-icon iconfont icon-faxian" style="font-size: 25px;"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" id="me.html">
				<span class="mui-icon iconfont icon-wo" style="font-size: 25px;"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<script>
			var ele_title = document.getElementById('title');
			document.addEventListener("plusready", function() {
				plus.push.addEventListener('click', function(msg) {
					mui.openWindow("friend_request_list.html");
				}, false);
				plus.push.addEventListener("receive", function(msg) {
					var sender = JSON.parse(msg.content);
					app.setFriendRequestList(sender.senderId);
				});
			});

			mui(".mui-bar-tab").on("tap", ".mui-tab-item", function() {
				plus.webview.getWebviewById(this.id).show();
				ele_title.innerHTML = this.getElementsByClassName('mui-tab-label')[0].innerHTML;
			});

			var tab_pages = [{
					url: "chat.html",
					id: "chat.html"
				},
				{
					url: "friend_list.html",
					id: "friend_list.html"
				},
				{
					url: "discover.html",
					id: "discover.html"
				},
				{
					url: "me.html",
					id: "me.html"
				}
			];

			mui.plusReady(function() {
				var floatw = null;
				ws = plus.webview.currentWebview();
				floatw = plus.webview.create("menu.html", "menu", {
					background: "transparent",
					zindex: 10
				});
				
				var show = false;
				document.getElementById("pop_btn").addEventListener("tap", function() {
					if(show) { // 避免var快速多次点击创建多个窗口  
						floatw.show("fade-out");
						show = false;
					} else {
						floatw.show("fade-in");
						show = true;							
					}
				});
			
				for (let item of tab_pages) {
					var view = plus.webview.create(item.url, item.id, {
						top: "44px",
						bottom: "50px"
					});
			
					view.hide();
					plus.webview.currentWebview().append(view);
				}
			
				plus.webview.getWebviewById("chat.html").show();
			});
		</script>
	</body>
</html>
